<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3单位</title> <!-- title标签的内容会同时也会作为搜索引擎中标题出现 -->
    <link href="../imgs/keai.gif" rel="shortcut icon"> <!-- 图标 -->
    <meta name="author" content="段永红">   <!-- 作者 --> 
    <meta name="keywords" content="px像素,百分比,em"/> <!-- 搜索引擎网站标题关键字多个逗号隔开 -->
    <meta name="description" content="一个非常不错的网站"/> <!-- 搜索引擎网站描述介绍 -->
    <link rel="stylesheet" href="../../css/reset.css"> <!-- 清除浏览器默认样式 -->
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/fonts/fontawesome-free-6.4.0-web/css/all.css"> <!-- css图标库 -->
   
    <style>

        /* 
            浏览器私有属性介绍
            -moz- 代表FireFox浏览器私有属性
            -ms- 代表IE浏览器私有属性
            -webkit- 代表safari、chrome浏览器私有属性
            -o- 代表opera浏览器私有属性
            实列：
        */
        /*
                长度单位px：
                    像素
                        屏幕(显示器)实际是由一个一个的小点点构成的
                        不同屏幕的像素大小是不同的, 像素越小屏幕显示的效果越清晰
                        所以同样的200px在不同的设备下显示效果不一样
                百分比%
                        也可以将属性值设为相对与父元素属性的百分比
                        设置百分比可以使元素跟随父元素的改变而改变
                em
                        em是局部元素内的字体大小来计算的
                        1em = 1font-size
                        计算方式:(em * font-size)
                            如: width:10em; font-size:30px; 
                            10 * 30 = 300px 得出的宽度就是300像素
                rem
                        rem与em一样、唯独不一样的是rem是跟据(全局)根元素(html)的字体大小来计算
                            html{font-size: 30px}根据html元素的计算
        */
        .c_div1{
            width: 300px;
            height: 100px;
            background-color: rgba(255, 165, 0, .5);  /* 第4个参数颜色透明度 0~1之间  1完全不透明 */ 

            /*
                h: 色相(0~360)
                s: 饱和度(0%~100%)
                l: 亮度(0%~100%)
                a: 透明度(0~1)
            */
            /*background-color: hsl(0, 100%, 50%, 0.1);  hsl颜色、用的不多一般都是rgba就可以、这个知道一下就可以 */
        }
        
        .c_div1_div1{
            width: 50%;
            height: 50%;
            background-color: aqua;
        }

        .c_div2{
            font-size: 30px;
            width: 10em;
            height: 10em;
            background-color: greenyellow; 
            padding: 10px 20px 30px 40px; /*内边距测试查看*/
            margin: 10px 20px 30px 40px;  /*外边距测试查看*/
        }


        /* ------------------ 盒子模型 ------------------ */
        /*
            
            内容区(content), 元素中的所有子元素和文本内容都在内容区排列
                内容区大小由width 和 height两个属性来设置
                    width: 200px; 设置内容区的宽度
                    height: 200px; 设置内容区的高度
            边框区(border), 边框属于盒子边缘, 边框的厚度属于盒子内部, 出了边框都是盒子的外部
                边框的大小会影响到整个盒子的大小
                要设置边框, 需要至少设置3个样式
                边框的宽度 border-width: 10px 10px 10px 10px;
                边框的颜色 border-color: red orange yellow green; (指定4个边设置不同的颜色、顺序：上右下左)
                边框的样式 border-style: solid dotted dashed double; (指定4个边设置不同的边框、顺序：上右下左)
                补充：边框值说明
                    四个值：上 右 下 左
                    三个值：上 左右 下
                    两个值：上下 左右
                    一个值：上下左右，值简写border: 1px red solid;                      
            内边距(padding)可以同时指定4个方向的内边距
                padding: 10px 20px 30px 40px;   (上右下左)
            外边距(margin)可以同时指定4个方向的内边距
                 margin: 10px 20px 30px 40px;   (上右下左)

            box-sizing: content-box;  用来设置盒子尺寸的计算方式(设置width和height的作用) 
                 content-box 默认值, 宽度和高度用来设置内容区的大小
                    border-box 宽度和高度用来设置整个盒子可见框大小
                            width和height值得是内容区和内边距和边框的总大小    
                
            box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5) 用来设置元素阴影效果
                    第一个值：左右偏移
                    第二个值：上下偏移
                    第三个值：阴影模糊半径(羽化)
                    第四个值：阴影颜色
            
            border-radius: 10px 20px 30px 40px; 设置元素为圆角
                    四个值：上左、上右、下右、下左
           
        */
        .c_div2_inner{
            
            width: 100%;
            height: 100%;            
            background-color: red;
            line-height: 10em; /* 文本上下居中、要跟父元素的高度一样 */
            text-align: center; /* 文本左右居中 */
            /* text-decoration: none;  去除下划线、可以针对a标签元素 */
        }
 
        .c_ul{
            /* border: 1px red solid;  */
            width: 600em;
        }
        
        .c_ul li{
            color: rgba(17, 109, 190, 0.655);
            padding: 0px 0px 0px 40px;
            float: left;
            border: 1px red solid;
            margin-left: 1px;
            
            /*
                display 用来设置元素显示的类型
                    可选值：
                        inline  将元素设置为行内元素、如span就属于行内元素不会独占一行,不支持width和height属性
                        block   将元素设置为块元素、如div就属于块元素都会独占一行,支持width和height属性
                        inline-block    将元素设置为行内块元素、既可以设置宽高又不会独占一行
                        table   将元素设置为一个表格
                        none    将元素不在页面中显示, 同时不会占据位置
                
                visibility 用来设置元素的显示状态
                    可选值：
                        visible 默认值，元素在页面中正常显示
                        hidden  元素在页面中隐藏、不显示, 但是依然占据页面位置
                
            */
            
            
        }

        

         /* 
            position 定位
                static 默认值,元素静止没有开启定位
                absolute 绝对定位开启、参照物已最近开启定位的父元素
                relative 相对定位开启、参照物已最近开启定位的父元素
                fixed 固定定位开启、参照物html窗口
                sticky 粘滞定位新推出的、与fixed差不多, IE不兼容、参照物html窗口
        */
        
        /* 定位方式实现：上下左右居中 */
        /* .c_div1{
            position: absolute;left: 0;right: 0; top: 0; bottom: 0;margin: auto;
        } */


        /* 溢出加省略号 */
        p{
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-decoration: underline;
            background-position: top;
        }
        
        .c_div1:hover .c_div1_div1{color:red}; /* 鼠标选中给子元素添加样式 */
    </style>

</head>
<body>
    <div class="c_div1 clearfix">
        <div class="c_div1_div1">aa</div>
    </div>

    <div class="c_div2">
        <div class="c_div2_inner">内边距测试查看</div>
    </div>

    <ul class="c_ul clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <!-- 溢出加省略号 -->
    <p> 
        No matter the ending is perfect or not, you cannot disappear from my world
    </p>
</body>
</html>